<template>
	<view class="content">
		<z-paging ref="paging" v-model="cardList" @query="queryList" height="calc(100vh - 90rpx)"
			:paging-style="{backgroundColor: '#F8F9FC'}" :hide-loading-more="true"
			:refresher-enabled="true" refresher-threshold="80">

      <template #top>
        <view class="navbar">
          <view v-for="(item, index) in navList" :key="index" class="nav-item"
                :class="{current: tabCurrentIndex === index}" @click="tabClick(index)">
            <text>{{$t(`cardPacks.tabs.${index}`)}}</text>
          </view>
        </view>
      </template>

			<!-- 卡包列表 -->
			<view v-for="(item,index) in cardList" :key="index" class="card-item" @click="goCardDetail(item)">
				<!-- 卡包头部信息 -->
				<view v-for="(goodsItem, goodsIndex) in item.OrdersOnlineInfoViewList" :key="goodsIndex">
					<view class="card-header">
						<text v-if="item.BusinessModel" class="shop-name">{{item.BusinessModel.ShopName || $t('cardPacks.labels.noData')}}</text>
						<text v-else class="shop-name">{{item.PackProductCardsGoodsInfo.Name}}</text>
						<text class="status-tag">{{goodsItem.Type | statusTitle}}</text>
					</view>
					<view class="card-content">
						<image class="card-img" :src="goodsItem.Img" mode="aspectFill"></image>
						<view class="card-info">
							<view class="card-title">{{goodsItem.ProductName}}</view>
							<view class="card-details">
								<text class="detail-item">{{$t('cardPacks.labels.quantity', {count: goodsItem.Num})}}</text>
								<text class="detail-item">{{$t('cardPacks.labels.price', {price: (goodsItem.OriginalPrice | toFixd)})}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部价格和操作按钮 -->
				<view class="card-footer">
					<view class="price-summary">
						{{$t('cardPacks.labels.total', {amount: item.PackProductCardsGoodsInfo.Price})}}
					</view>
					<view class="btn-box" v-if="!item.PackProductCardsGoodsInfo.Booked">
						<button class="use-btn" @click.stop="goUseCard(item)">{{$t('cardPacks.labels.useCard')}}</button>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {getUserCardInfoList} from '@/api/mall.js'
	import {orderStateExp} from '@/utils/base.js'

	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				cardList: [],
				isShowEmpty: false,
				navList: [
					{
						state: 0,
						text: '全部',
						parma: {
							TypeArr: "7,8,15"
						}
					},
					{
						state: 1,
						text: '待预约',
						parma: {
							TypeArr: '15',
							IsOnline: 1
						}
					},
					{
						state: 2,
						text: '已退款',
						parma: {
							TypeArr: '8'
						}
					}
				]
			};
		},
		filters: {
			toFixd(e) {
				let price = e * 1 || 0
				return price > 0 ? price.toFixed(2) : 0
			},
			statusTitle(e) {
				return orderStateExp(e).stateTip
			}
		},
		onLoad(options) {
			if (options.index !== undefined) {
				this.tabCurrentIndex = parseInt(options.index);
			}

			uni.setNavigationBarTitle({
				title: this.$t('cardPacks.title')
			});
		},
		watch: {
			// 监听语言变化，更新导航栏标题
			'$i18n.locale'() {
				uni.setNavigationBarTitle({
					title: this.$t('cardPacks.title')
				})
			}
		},
		methods: {
			// 查询列表数据
			queryList(pageNo, pageSize) {
				const navItem = this.navList[this.tabCurrentIndex];

				uni.showLoading({
					title: this.$t('merchants.loading'),
					mask: false
				});

				getUserCardInfoList({
					Index: pageNo,
					Size: pageSize,
					...navItem.parma
				}).then(res => {
					const data = res.Data || [];
					// 更新空数据状态
					this.isShowEmpty = pageNo === 1 && (!data || data.length === 0);
					// 通知z-paging更新数据
					this.$refs.paging.complete(data);
					uni.hideLoading();
				}).catch(err => {
					console.error('加载数据失败:', err);
					this.$refs.paging.complete(false);
					uni.hideLoading();
					uni.showToast({
						title: this.$t('merchants.loadFailed'),
						icon: 'none'
					});
				});
			},

			// 顶部tab点击
			tabClick(index) {
				if (this.tabCurrentIndex === index) return;
				this.tabCurrentIndex = index;
				this.cardList = []; // 切换时清空列表
				this.$refs.paging.reload(); // 重新加载数据
			},

			// 跳转到详情页
			goCardDetail(item) {
				console.log('查看卡包详情', item);
			},

			// 去使用卡包
			goUseCard(item) {
				console.log('去使用卡包', item);
				// 阻止冒泡已通过@click.stop处理

				// 跳转到预约页面
				if (item && item.OrdersOnlineInfoViewList && item.OrdersOnlineInfoViewList.length > 0) {
					const cardInfo = item.PackProductCardsGoodsInfo;
					uni.navigateTo({
						url: `/mall_subpages/cardPacks/booking?id=${cardInfo.ProductId}&parameters=${JSON.stringify(item.PackProductCardsGoodsInfo)}`
					});
				} else {
					uni.showToast({
						title: this.$t('cardPacks.labels.incompleteInfo'),
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 导航栏样式 */
	.navbar {
		display: flex;
		height: 90rpx;
		background: #FFFFFF;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			position: relative;
			transition: all 0.3s;

			text {
				font-size: 28rpx;
				color: #666;
				padding: 8rpx 20rpx;
				border-radius: 24rpx;
				transition: all 0.3s;
			}

			&.current {
				text {
					color: #FFFFFF;
					background-color: #00BFFF;
					font-weight: bold;
					font-size: 30rpx;
					box-shadow: 0 4rpx 8rpx rgba(73, 143, 255, 0.2);
					transform: translateY(0) scale(1);
				}
			}
		}
	}

	/* 卡包项样式 */
	.card-item {
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 20rpx;
		padding: 0;
		box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		transform: translateY(0);
		transition: transform 0.2s, box-shadow 0.2s;



		&:active {
			transform: scale(0.98);
			box-shadow: 0 1rpx 10rpx rgba(0, 0, 0, 0.03);
		}

		/* 卡包头部 */
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 24rpx;
			border-bottom: 1rpx solid #F5F7FA;

			.shop-name {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}

			.status-tag {
				color: #00BFFF;
				font-size: 24rpx;
				font-weight: 500;
				padding: 6rpx 16rpx;
				background: rgba(73, 143, 255, 0.1);
				border-radius: 20rpx;
			}
		}

		/* 卡包内容 */
		.card-content {
			display: flex;
			padding: 20rpx 24rpx;

			.card-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
				background: #F8F8F8;
				object-fit: cover;
			}

			.card-info {
				flex: 1;
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.card-title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					margin-bottom: 10rpx;
				}

				.card-details {
					.detail-item {
						display: block;
						font-size: 24rpx;
						color: #666;
						margin-bottom: 8rpx;

						.price {
							color: #FF6633;
							font-weight: 600;
						}
					}
				}
			}
		}

		/* 卡包底部 */
		.card-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 24rpx;
			border-top: 1rpx solid #F5F7FA;

			.price-summary {
				font-size: 26rpx;
				color: #666;

				.total-price {
					font-size: 32rpx;
					color: #FF6633;
					font-weight: 600;
				}
			}

			.btn-box {
				.use-btn {
					height: 64rpx;
					line-height: 64rpx;
					padding: 0 30rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					background: #00BFFF;
					border-radius: 32rpx;
					border: none;
					box-shadow: 0 4rpx 8rpx rgba(73, 143, 255, 0.2);

					&:active {
						background: #00BFFF;
						transform: translateY(2rpx);
					}
				}
			}
		}
	}
</style>
